<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/css/message.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css" />
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script>
        $(function () {
            var user = JSON.parse(sessionStorage.getItem("user"));
            $("#users").renderValues(user)
            console.log(user);
            //游记收藏的分页
            //方法的抽取  分页查询
            function query() {
                //第一页的数据
                $.get("/travels/"+user.id+"/collect",{currentPage:currentPage},function (data) {
                     dataList = $.merge(dataList,data.list);
                    $("#travels").renderValues({list:dataList},{
                        setHref:function (item,value) {
                            var href = $(item).data("href"); //得到href
                            $(item).attr("href",href + value);//手动拼接跳转的url
                        }
                    })
                    //第一页数据,,,每次查询完之后页面加一
                    currentPage +=1;
                    //将第一查询的总页数封装成变量
                    totalPage = data.pages;
                })
            }
            //分页查询需要拼接的临时变量
            var currentPage =1;
            //解决上一1页时数据丢失的问题
            var dataList = [];
            //总页数变量
            var totalPage = 1;
            //执行函数 ,第一次发送请求, currentPage= 1,默认是五条数据
            query();

            //屏幕滚动事件, 相当于下一页,如果currentPage >totalPaget .就是currentPage==totalPage.一直循环出来数据
            $(window).scroll(function () {
                //触发翻页的时机.  屏幕高度+滚动高度>=数据的高度的时候
                if ($(window).height()+$(document).scrollTop()>=$(document).height()) {
                    //解决翻页底部问题,一直发送请求,如果当前页小于总页数的时候
                    if (currentPage <= totalPage) {
                        query();
                    } else {
                        //已经到最后一页
                        $(document).dialog({
                            type: "notice",
                            infoText: "到底了........",
                            autoClose: 1000,
                            position: "bottom" //在底部显示
                        })
                    }
                }
            })






            //攻略的收藏
            $.get("/strategys/"+user.id+"/collect",function (data) {

                $("#strategys").renderValues({list:data.list},{
                    setHref:function (item,value) {
                        var href = $(item).data("href"); //得到href
                        $(item).attr("href",href + value);//手动拼接跳转的url
                    }
                })
            })
            //日报的收藏
            $.get("/dailies/"+user.id+"/collect",function (data) {
                console.log(data);
                $("#dailys").renderValues({list:data.list},{
                    setHref:function (item,value) {
                        var href = $(item).data("href"); //得到href
                        $(item).attr("href",href + value);//手动拼接跳转的url
                    }
                })
            })



        })


    </script>

</head>

<body>
<div class="container" style="background-color: snow">
    <div class="col-0" >
        <a href="/mine/profiles.html">
            <span><i class="fa fa-angle-left fa-2x" ></i></span>
        </a>
    </div>
    <div class="row info" id="users" >

        <div class="col-2" style="margin-right: 50px;">
            <img  style="height: 80px;width: 80px" render-src="headImgUrl">
        </div>


        <div class="col-8" >
            <h4 style="color: #00bbd3" render-html="nickName"></h4>
            <ul class="list-inline">
                <li class="list-inline-item">
                    <small style="color: #00bbd3"  >常住地</small>
                </li>
                <li class="list-inline-item" >
                    <small style="color: #00bbd3" render-html="place"></small>
                </li>
                <li class="list-inline-item">
                    <small style="color: #00bbd3">关注<span>10</span></small>
                </li>
                <li class="list-inline-item">
                    <small style="color: #00bbd3">粉丝<span>99</span></small>
                </li>
                <li class="list-inline-item">
                    <small style="color: #bd2130"><span render-html="sign"></span></small>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="tabs"  style="background-color: snow" >
    <ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">

        <li class="nav-item">
            <a class="nav-link active " id="travels-tab" data-toggle="pill" href="#travels">
                游记收藏
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link " id="strategys-tab" data-toggle="pill" href="#strategys">
                攻略收藏
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link " id="dailys-tab" data-toggle="pill" href="#dailys">
                日报收藏
            </a>
        </li>

    </ul>
    <!--收藏的游记内容-->
    <div class="container tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="travels">
            <div render-loop="list">
                <dl class="list">
                    <dd>
                        <!--<a href="javascript:;" data-url="/travelContent.html?travelId="  render-attr="data-tid=list.travel.id">-->
                            <a data-href="/travelContent.html?id=" render-fun="setHref" render-key="list.id">
                            <img render-src="list.coverUrl" style="width: 80%">
                            <p><span class="title" style="font-style: italic;" render-html="list.title"></span>
                            </p>
                            </a>

                        <hr>
                    </dd>

                </dl>
            </div>
        </div>
        <!--攻略收藏-->
        <div class="tab-pane fade show " id="strategys">
            <div render-loop="list">
                <dl class="list">
                    <dd>
                        <a data-href="/strategyCatalogs.html?strategyId=" render-fun="setHref" render-key="list.id">
                       <!-- <a href="javascript:;" data-url="/strategyContent.html?strategyId="  render-attr="data-tid=list.travel.id">-->
                            <img render-src="list.coverUrl" style="width: 80%">
                            <p><span class="title" render-html="list.title"></span>
                            </p>
                        </a>

                        <hr>
                    </dd>
                </dl>
            </div>
        </div>
        <!--攻略收藏-->
        <div class="tab-pane fade show " id="dailys">
            <div render-loop="list">
                <dl class="list">
                    <dd>
                        <a data-href="/newsContent.html?id=" render-fun="setHref" render-key="list.id">
                       <!-- <a href="javascript:;" data-url="/strategyContent.html?strategyId="  render-attr="data-tid=list.travel.id">-->
                            <img render-src="list.coverUrl" style="width: 80%">
                            <p><span class="title" render-html="list.title"></span>
                            </p>
                        </a>

                        <hr>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</div>

</body>

</html>